<html>
<head>
<title>Typography sample</title>
<link href="typo.css" type="text/css" rel="stylesheet" />
</head>
<body>

<div class="ja-typo-blockswrap clearfix">
	<div class="ja-typo-blockrow cols-4 clearfix">
		<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Heading</span></h2>
				<div class="typo">
					<span class="title">Heading 1</span>
					<div class="sample">
						<h1>This is a sample Heading 1. Lorem ipsum.</h1>	
					</div>
				</div>
				<div class="typo">
					<span class="title">Heading 2</span>
					<div class="sample">
						<h2>This is a sample Heading 2. Lorem ipsum.</h2>	
					</div>
				</div>
				<div class="typo">
					<span class="title">Heading 3</span>
					<div class="sample">
						<h3>This is a sample Heading 3. Lorem ipsum.</h3>	
					</div>
				</div>
				<div class="typo">
					<span class="title">Heading 4</span>
					<div class="sample">
						<h4>This is a sample Heading 4. Lorem ipsum.</h4>	
					</div>
				</div>
				<div class="typo">
					<span class="title">Heading 5</span>
					<div class="sample">
						<h5>This is a sample Heading 5. Lorem ipsum.</h5>	
					</div>
				</div>
				<div class="typo">
					<span class="title">Heading 6</span>
					<div class="sample">
						<h6>This is a sample Heading 6. Lorem ipsum.</h6>	
					</div>
				</div>
			</div>
		</div>
		<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
				<h2 class="ja-typo-title"><span>Special Content</span></h2>
				<div class="typo">
					<span class="title">Highlight Code</span>
					<div class="sample">
						<p>Below is a sample of <strong>pre</strong> tag or <strong>code</strong> class:</p>
						<pre>#ja-rightcol { width: 180px; float: right; color: #EEEEEE; }</pre>
					</div>
				</div>
				<div class="typo">
					<span class="title">Highlight</span>
					<div class="sample">
						<p>This is a <span class="highlight">highlight phrase</span>. Use <strong>class="highlight"</strong>.</p>
					</div>
				</div>
				<div class="typo">
					<span class="title">Blockquote 1</span>
					<div class="sample">
						<blockquote><span class="open">T</span>his is a sample <strong>Blockquote</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</blockquote>
					</div>
				</div>
				<div class="typo">
					<span class="title">Blockquote 2</span>
					<div class="sample">
						<blockquote><span class="open">T</span>his is a sample Blockquote. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.<span class="close">!</span></blockquote>
					</div>
				</div>
				<div class="typo">
					<span class="title">Dropcaps</span>
					<div class="sample">
						<p><span class="dropcap">T</span>his is a Magazine Style Drop Cap. The first  letter in this paragraph is big. JA Templates bring into your Jooomla  template the magazine drop cap technique and CSS2 includes the  first-letter pseudo class.</p>
					</div>
				</div>
				<div class="typo">
					<span class="title">Blocknumber 1</span>
					<div class="sample">
						<p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
					</div>
				</div>
				<div class="typo">
					<span class="title">Blocknumber 2</span>
					<div class="sample">
						<p class="blocknumber blocknumber-2"><span class="bignumber">A</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-2"><span class="bignumber">C</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
					</div>
				</div>
				<div class="typo">
					<span class="title">Blocknumber 3</span>
					<div class="sample">
						<p class="blocknumber blocknumber-3"><span class="bignumber">a</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-3"><span class="bignumber">b</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
					</div>
				</div>
			</div>
		</div>
		<!-- Bubbles -->
		<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
				<h2 class="ja-typo-title"><span>Bubbles</span></h2>
					<div class="typo">
							<span class="title">Grey Around 1</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-rounded bubble-1">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Grey Around 2</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-rounded bubble-2">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Rounded Blue 1</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-rounded bubble-3">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Rounded Blue 2</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-rounded bubble-4">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Rounded Black 1</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-rounded bubble-5">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Rounded Black 2</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-rounded bubble-6">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
				<h2 class="ja-typo-title"><span>Bubbles</span></h2>
					<div class="typo">
							<span class="title">Grey Bubbles 1</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-1">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Grey Bubbles 2</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-2">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Blue Bubbles 1</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-3">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Blue Bubbles 2</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-4">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Black Bubbles 1</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-5">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Black Bubbles 2</span>
							<div class="sample">
								<div class="ja-typo-bubble bubble-6">
									<div class="ja-typo-bubblect">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien.</div>
									<p class="ja-typo-bubble-meta"><span class="ja-typo-bubble-arrow"> </span> <span class="ja-typo-bubble-author">Author Name</span></p>
								</div>
							</div>
						</div>
				</div>
			</div>
			<!-- Bubbles -->
	</div>
</div>

<div class="ja-typo-blockswrap clearfix">
	<div class="ja-typo-blockrow cols-4 clearfix">
			<!-- Message Boxes -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
				<h2 class="ja-typo-title"><span>Message Boxes</span></h2>
					<div class="typo">
							<span class="title">With Icons 1</span>
							<div class="sample">
								<p class="ja-typo-box box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">With Icons 2</span>
							<div class="sample">
								<p class="ja-typo-box box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 1</span>
							<div class="sample">
								<p class="ja-typo-box box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 1 Hilite</span>
							<div class="sample">
								<p class="ja-typo-box box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 2</span>
							<div class="sample">
								<p class="ja-typo-box box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 2 Hilite</span>
							<div class="sample">
								<p class="ja-typo-box box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
				</div>
			</div>
			<!-- Message Boxes -->
			<!-- Message Boxes Rounded -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
				<h2 class="ja-typo-title"><span>Rounded Message</span></h2>
					<div class="typo">
							<span class="title">With Icons 1</span>
							<div class="sample">
								<p class="ja-typo-box box-rounded box-sticky"><strong>This is a sticky</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">With Icons 2</span>
							<div class="sample">
								<p class="ja-typo-box box-rounded box-download"><strong>This is a download box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 1</span>
							<div class="sample">
								<p class="ja-typo-box box-rounded box-grey-1"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 1 Hilite</span>
							<div class="sample">
								<p class="ja-typo-box box-rounded box-hilite-1"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 2</span>
							<div class="sample">
								<p class="ja-typo-box box-rounded box-grey-2"><strong>This is a grey box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Style 2 Hilite</span>
							<div class="sample">
								<p class="ja-typo-box box-rounded box-hilite-2"><strong>This is a hilite box</strong>. Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
				</div>
			</div>
			<!-- Message Boxes Rounded -->
			<!-- Legends -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
				<h2 class="ja-typo-title"><span>Legends</span></h2>
					<div class="typo">
							<span class="title">Legend - Style 1</span>
							<div class="sample">
								<div class="ja-typo-legend legend-1">
									<h3 class="legend-title">Legend - Style 1</h3>
									Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Legend - Style 2</span>
							<div class="sample">
								<div class="ja-typo-legend legend-2">
									<h3 class="legend-title">Legend - Style 1</h3>
									Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Rounded Legend - Style 1</span>
							<div class="sample">
								<div class="ja-typo-legend legend-rounded legend-1">
									<h3 class="legend-title">Rounded Legend - Style 1</h3>
									Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Rounded Legend - Style 2</span>
							<div class="sample">
								<div class="ja-typo-legend legend-rounded legend-2">
									<h3 class="legend-title">Rounded Legend - Style 2</h3>
									Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Legend Logo- Style 1</span>
							<div class="sample">
								<div class="ja-typo-legend legend-logo legend-2">
									<h3 class="legend-title">Rounded Legend - Style 2</h3>
									Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Legend Logo- Style 2</span>
							<div class="sample">
								<div class="ja-typo-legend legend-logo legend-2">
									<h3 class="legend-title">Rounded Legend - Style 2</h3>
									Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.
								</div>
							</div>
						</div>
				</div>
			</div>
			<!-- Legends -->
			<!-- Legends -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
				<h2 class="ja-typo-title"><span>Special Module</span></h2>
					<div class="typo">
							<span class="title">Badge Top</span>
							<div class="sample">
								<div class="moduletable moduletable_badge badge-top"><span class="badge"> </span>
									<div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!
									</div>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Badge New</span>
							<div class="sample">
								<div class="moduletable moduletable_badge badge-new"><span class="badge"> </span>
									<div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!
									</div>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Badge Pick</span>
							<div class="sample">
								<div class="moduletable moduletable_badge badge-pick"><span class="badge"> </span>
									<div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!
									</div>
								</div>
							</div>
						</div>
						<div class="typo">
							<span class="title">Badge Hot</span>
							<div class="sample">
								<div class="moduletable moduletable_badge badge-hot"><span class="badge"> </span>
									<div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!
									</div>
								</div>
							</div>
						</div>
				</div>
			</div>
			<!-- Legends -->
	</div>
</div>
<!-- Icons Style -->
<div class="ja-typo-blockswrap clearfix">
	<h1 class="ja-typo-title"><span>Icons Style</span></h1>
	<div class="ja-typo-blockrow cols-6 clearfix">
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
					<div class="typo">
							<span class="title">Error icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-error"><span class="icon">&nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Message icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-message"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Tips icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-tips"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Key icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-key"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Tag icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-tag"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Note icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-note"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
					<div class="typo">
							<span class="title">Rss icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-rss"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
					</div>
					<div class="typo">
							<span class="title">Page icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-page"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
					</div>
					<div class="typo">
							<span class="title">Cart icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-cart"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
					</div>
					<div class="typo">
							<span class="title">Demo icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-demo"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Download icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-download"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Disussion icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-discussion"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
				</div>
			</div>

			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
					<div class="typo">
							<span class="title">Info icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-info"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Readmore icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-readmore"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Doc icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-doc"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Signup icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-signup"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Login icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-login"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Submit icon</span>
							<div class="sample">
								<p class="ja-typo-icon icon-submit"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
							</div>
						</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
					<div class="typo">
						<span class="title">Extension icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-extension"><span class="icon">&nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">User icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-user"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Group icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-group"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Birthday icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-birthday"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Photo icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-photo"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Calendar icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-calendar"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
					<div class="typo">
						<span class="title">Address icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-address"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Phone icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-phone"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Mobi icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-mobi"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Fax icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-fax"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Email icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-email"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Website icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-website"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
					<div class="typo">
						<span class="title">Yahoo icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-yahoo"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Gmail icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-gmail"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Skype icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-skype"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">MSN icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-msn"><span class="icon">&nbsp; </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Facebook icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-facebook"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Twitter icon</span>
						<div class="sample">
							<p class="ja-typo-icon icon-twitter"><span class="icon"> &nbsp;</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
						</div>
					</div>
				</div>
			</div>
	</div>
</div>
<!-- Icons Style -->

<!-- List, Fieldset, Form Elements, Tags -->
<div class="ja-typo-blockswrap clearfix">
	<div class="ja-typo-blockrow cols-5 clearfix">
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>List</span></h2>
					<div class="typo">
							<span class="title">Ordered List</span>
							<div class="sample">
								<ol class="ja-ordered-list">
									<li>This is a sample <strong>Ordered List</strong>.</li>
									<li>Lorem ipsum dolor sit amet consectetur</li>
									<li>Lorem ipsum dolor sit amet consectetur</li>
									<li>Lorem ipsum dolor sit amet consectetur</li>
								</ol>
							</div>
						</div>
						<div class="typo">
							<span class="title">Un-Ordered List</span>
							<div class="sample">
								<ul class="ja-unordered-list">
									<li>This is a sample <strong>Unordered List</strong>.</li>
									<li>Lorem ipsum dolor sit amet consectetur</li>
									<li>Lorem ipsum dolor sit amet consectetur</li>
									<li>Lorem ipsum dolor sit amet consectetur</li>
								</ul>
							</div>
						</div>
						<div class="typo">
							<span class="title">Definition List</span>
							<div class="sample">
								<dl class="ja-definition-list"> <dt>This is a sample <strong>Definition List</strong>.</dt> <dd>Condimentum quis.</dd> <dt><dt>This is a sample <strong>Definition List</strong></dt> <dd>Congue Quisque augue elit dolor.</dd> </dl>
							</div>
						</div>
						<div class="typo">
							<span class="title">Special List 1</span>
							<div class="sample">
								<ul class="ja-typo-list list-arrow">
								<li><span class="icon"> </span>This is a sample <strong>Arrow list</strong>.</li>
								<li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li>
								<li><span class="icon"> </span>This is a sample Arrowlist.</li>
								</ul>
							</div>
						</div>
						<div class="typo">
							<span class="title">Special List 2</span>
							<div class="sample">
								<ul class="ja-typo-list list-star">
								<li><span class="icon"> </span>This is a sample <strong>Star list</strong>.</li>
								<li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li>
								<li><span class="icon"> </span>This is a sample Starlist.</li>
								</ul>
							</div>
						</div>
						<div class="typo">
							<span class="title">Special List 3</span>
							<div class="sample">
								<ul class="ja-typo-list list-check">
								<li><span class="icon"> </span>This is a sample <strong>Check list</strong>.</li>
								<li><span class="icon"> </span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</li>
								<li><span class="icon"> </span>This is a sample Checklist.</li>
								</ul>
							</div>
						</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Fieldset</span></h2>
					<div class="typo">
							<span class="title">Templates Fieldset</span>
							<div class="sample">
								<fieldset> <legend>Templates Fieldset</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. </fieldset>
							</div>
					</div>
					<div class="typo">
							<span class="title">Special Fieldset - Style 1</span>
							<div class="sample">
								<fieldset class="ja-typo-fieldset fieldset-1"> <legend>Special Fieldset - Style 1</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. </fieldset>
							</div>
					</div>
					<div class="typo">
							<span class="title">Logo Fieldset</span>
							<div class="sample">
								<fieldset class="ja-typo-fieldset fieldset-2"> <legend>Special Fieldset - Style 2</legend> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est. </fieldset>
							</div>
					</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Form Elements</span></h2>
					<div class="typo">
							<span class="title">Inputext 1</span>
							<div class="sample">
								<p><label for="input">Sample Input 1</label> <br /> <input class="inputbox" name="input" type="text" /></p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Inputext 2</span>
							<div class="sample">
								<p><input class="inputbox" name="input" type="input" onfocus="if(this.value=='Sample Input 2') this.value='';" onblur="if(this.value=='') this.value='Sample Input 2';" value="Sample Input 2" /></p>
							</div>
						</div>
						<div class="typo">
							<span class="title">Radio Input</span>
							<div class="sample">
								<input type="radio" /><label for="radio">Sample Radio Input</label>
							</div>
						</div>
						<div class="typo">
							<span class="title">CheckBox Input</span>
							<div class="sample">
								<input type="checkbox" /><label for="checkbox">Sample CheckBox Input</label>
							</div>
						</div>
						<div class="typo">
							<span class="title">Select</span>
							<div class="sample">
								<select id="select"><option>Option One</option><option>Option Two</option></select>
							</div>
						</div>
						<div class="typo">
							<span class="title">Textarea</span>
							<div class="sample">
								<textarea class="inputbox" cols="32" rows="5">Textarea text</textarea>
							</div>
						</div>
						<div class="typo">
							<span class="title">Button</span>
							<div class="sample">
								<button class="button">Submit Button</button>
							</div>
						</div>
				</div>
			</div>

			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Squared Tags</span></h2>
					<div class="typo">
						<span class="title">Gray Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-grey">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Blue Tag</span>
						<div class="sample">		
							<p>This is a sample <span class="ja-typo-tag tag-blue">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Green Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-green">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Red Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-red">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Orange Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-orange">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Black Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-black">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Rounded Tags</span></h2>
					<div class="typo">
						<span class="title">Gray Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-rounded tag-grey">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Blue Tag</span>
						<div class="sample">		
							<p>This is a sample <span class="ja-typo-tag tag-rounded tag-blue">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Green Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-rounded tag-green">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Red Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-rounded tag-red">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Orange Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-rounded tag-orange">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
					<div class="typo">
						<span class="title">Black Tag</span>
						<div class="sample">
							<p>This is a sample <span class="ja-typo-tag tag-rounded tag-black">Inline Tag</span>. Use this to provide useful information.</p>
						</div>
					</div>
				</div>
			</div>
	</div>
</div>
<!-- List, Fieldset, Form Elements, Tags -->

<!-- Buttons -->
<div class="ja-typo-blockswrap clearfix">
	<div class="ja-typo-blockrow cols-6 clearfix">
			<!-- Big Buttons -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Big Buttons</span></h2>
					<div class="typo">
							<span class="title">Blue</span>
							<div class="sample">
								<a class="ja-typo-btn btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Green</span>
							<div class="sample">
								<a class="ja-typo-btn btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Red</span>
							<div class="sample">
								<a class="ja-typo-btn btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Orange</span>
							<div class="sample">
								<a class="ja-typo-btn btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Black</span>
							<div class="sample">
								<a class="ja-typo-btn btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Grey</span>
							<div class="sample">
								<a class="ja-typo-btn btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a>
							</div>
						</div>
				</div>
			</div>
			<!-- Big Buttons -->
			
			<!-- Icon Buttons -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Icon Buttons</span></h2>
					<div class="typo">
							<span class="title">Save</span>
							<div class="sample">
								<a class="ja-typo-btn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a>
							</div>
					</div>
					<div class="typo">
							<span class="title">Tip</span>
							<div class="sample">
								<a class="ja-typo-btn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a>
							</div>
					</div>
					<div class="typo">
							<span class="title">Waring</span>
							<div class="sample">
								<a class="ja-typo-btn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a>
							</div>
					</div>
					<div class="typo">
							<span class="title">Info</span>
							<div class="sample">
								<a class="ja-typo-btn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a>
							</div>
					</div>
					<div class="typo">
							<span class="title">Ok</span>
							<div class="sample">
								<a class="ja-typo-btn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a>
							</div>
					</div>
				</div>
			</div>
			<!-- Icon Buttons -->
			
			<!-- Small Buttons -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Small Buttons</span></h2>
					<div class="typo">
							<span class="title">Blue</span>
							<div class="sample">
								<a class="ja-typo-btn btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Green</span>
							<div class="sample">
								<a class="ja-typo-btn btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Red</span>
							<div class="sample">
								<a class="ja-typo-btn btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Orange</span>
							<div class="sample">
								<a class="ja-typo-btn btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Black</span>
							<div class="sample">
								<a class="ja-typo-btn btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a>
							</div>
						</div>
						<div class="typo">
							<span class="title">Grey</span>
							<div class="sample">
								<a class="ja-typo-btn btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a>
							</div>
						</div>
				</div>
			</div>
			<!-- Small Buttons -->
			
			<!-- Rounded Big Buttons -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Rounded Big</span></h2>
					<div class="typo">
						<span class="title">Blue</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-big btn-blue ja-typo-btn-big btn-big-blue" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Green</span>
						<div class="sample">		
							<a class="ja-typo-btn btn-rounded-big btn-green ja-typo-btn-big btn-big-green" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Red</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-big btn-red ja-typo-btn-big btn-big-red" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Orange</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-big btn-orange ja-typo-btn-big btn-big-orange" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Black</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-big btn-black ja-typo-btn-big btn-big-black" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Grey</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-big btn-grey ja-typo-btn-big btn-big-grey" href="#"><span>Button Text</span></a>
						</div>
					</div>
				</div>
			</div>
			<!-- Rounded Big Buttons -->
			
			<!-- Rounded Icon Buttons -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Rounded Icon</span></h2>
					<div class="typo">
						<span class="title">Save</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-save" href="#"><span><span>Button Text</span></span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Tip</span>
						<div class="sample">		
							<a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-tip" href="#"><span><span>Button Text</span></span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Wraning</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-warning" href="#"><span><span>Button Text</span></span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Info</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-info" href="#"><span><span>Button Text</span></span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Ok</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-icn ja-typo-btn-icn btn-icn-ok" href="#"><span><span>Button Text</span></span></a>
						</div>
					</div>
				</div>
			</div>
			<!-- Rounded Icon Buttons -->
			
			<!-- Rounded Small Buttons -->
			<div class="ja-typo-block">
			<div class="ja-typo-blockct clearfix">
			<h2 class="ja-typo-title"><span>Rounded Small</span></h2>
					<div class="typo">
						<span class="title">Blue</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-sm btn-blue ja-typo-btn-sm btn-sm-blue" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Green</span>
						<div class="sample">		
							<a class="ja-typo-btn btn-rounded-sm btn-green ja-typo-btn-sm btn-sm-green" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Red</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-sm btn-red ja-typo-btn-sm btn-sm-red" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Orange</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-sm btn-orange ja-typo-btn-sm btn-sm-orange" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Black</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-sm btn-black ja-typo-btn-sm btn-sm-black" href="#"><span>Button Text</span></a>
						</div>
					</div>
					<div class="typo">
						<span class="title">Grey</span>
						<div class="sample">
							<a class="ja-typo-btn btn-rounded-sm btn-grey ja-typo-btn-sm btn-sm-grey" href="#"><span>Button Text</span></a>
						</div>
					</div>
				</div>
			</div>
			<!-- Rounded Small Buttons -->
			
	</div>
</div>
<!-- Buttons -->
</body>
</html>